<template>
  <AppBar sourcePath="/login" title="注册" />
  <div class="register-wrapper">
    <var-form ref="registerFormRef" scroll-to-error="start">
      <var-space direction="column" :size="[14, 0]">
        <var-uploader
          :rules="[(v) => !!registerForm.titleSrc || '至少上传一张图片']"
          @after-read="afterRead"
          :maxlength="1"
          class="mt1"
        >
          <div class="upload-box">
            <var-icon name="plus" class="icon" v-if="!registerForm.titleSrc" />
            <img :src="imageBase + registerForm.titleSrc" v-else />
          </div>
        </var-uploader>
        <var-input
          placeholder="请输入用户名"
          :rules="[(v) => !!v || '用户名不能为空']"
          v-model="registerForm.userName"
          clearable
        />
        <var-input
          type="password"
          placeholder="请输入密码"
          :rules="[(v) => !!v || '密码不能为空']"
          v-model="registerForm.passWord"
          clearable
        />
        <var-input
          placeholder="请输入昵称"
          v-model="registerForm.nickName"
          clearable
        />
        <var-radio-group
          :rules="[(v) => !!v || '必须选择一个性别']"
          v-model="registerForm.sex"
        >
          <var-radio checked-value="3">未知</var-radio>
          <var-radio checked-value="1">男</var-radio>
          <var-radio checked-value="0">女</var-radio>
        </var-radio-group>
      </var-space>
    </var-form>

    <var-space direction="column" :size="[14, 0]">
      <var-button class="save-btn" block :loading="registerLodingRef" @click="handleSubmit(registerFormRef)">
        保存
      </var-button>
    </var-space>
  </div>
  <var-snackbar v-model:show="showRef" type="success">注册成功！</var-snackbar>
</template>
<script setup>
import { inject, ref } from 'vue';
import { useRouter } from 'vue-router';
import useSymbols from '../../compostions/useSymbols';
import AppBar from '../../components/AppBar/index.vue';
import { uploadFileApi } from '../../apis/uploadApi';

const imageBase = import.meta.env.VITE_BASE_FILE_SRC;

const router = useRouter();

const { registerLodingRef,registerFormRef, registerForm, registerSubmitForm } =
  inject(useSymbols);

const showRef = ref(false);

const handleSubmit = (formRef) => {
  registerSubmitForm(formRef, message, back, true);
};

// 跳转和消息提示
const back = (path = '/') => {
  router.replace(path);
};

/**
 * 消息提示
 * @param {*} param
 */
const message = (param = { type: 'success', message: '' }) => {
  return new Promise((resolve, reject) => {
    showRef.value = true;
    setTimeout(() => {
      showRef.value = false;
      resolve('success');
    }, 1500);
  });
};

// 获取文件后上传到指定接口
const afterRead = (varFile) => {
  uploadFileApi(varFile.file).then((res) => {
    registerForm.titleSrc = res;
  });
};
</script>

<style scoped lang="less">
.register-wrapper {
  padding: 1rem;
  margin-top: 3rem;
  .save-btn {
    margin-top: 3rem;
    background-color: var(--system-primary-color);
    color: #fff;
  }
  .upload-box {
    width: calc(100vw - 2rem);
    height: 7rem;
    border: 1px dashed #aaa;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .icon {
      font-size: 1.5rem;
    }
    img {
      width: 100%;
    }
  }
  /deep/.var-form-details__extra-message {
    display: none;
  }
}
</style>
